.tree-example {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .title-develop {
        background: #F7F9FB;
    }

    .tree-body {
        background: #fff;
        .tree-wrap {
            position: absolute;
            width: 100%;
            background: #fff;
            top: 42px;
            bottom: 0;
            .table-wrap {
                display: inline-block;
                position: absolute;
                height: 100%;
                right: 0;
                left: 240px;
            }
        }
        .tree {
            width: 240px;
            height: 100%;
            overflow: auto;
            display: inline-block;
            background: #F7F9FB;
            border-right: 1px solid #C1C7D0;
            .tree-head {
                padding: 0 0 0 24px;
                text-align: left;
                height: 40px;
                line-height: 40px;
                background-color: rgba(238, 238, 238, .1);
                font-family: Open Sans,Helvetica Neue,Arial,Hiragino Sans GB,Microsoft YaHei,sans-serif;
            }

            .tree-search {
                margin: 8px 0 0 0;
                text-align: center;
            }

            .no-search-container {
                position: absolute;
                top: 80px;
                bottom: 0;
                width: 250px;

                .no-search {
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    bottom: 0;
                    left: 61px;
                }
            }
        }

        .tree::-webkit-scrollbar {
            width: 4px;
            height: 10px;
        }

        .tree::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 5px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }

        /* .tree::-webkit-scrollbar-track {
            //滚动条里面轨道
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        } */

        .search-box {
            max-width: 200px;
        }

        .table-list {
            margin: 0;
            padding: 0;
        }

        .tree-table {
            height: 100%;
            margin: 0;
            // position: absolute;
            .table-header {
                margin: 0;
            }
            .u-grid {
                height: 100%;
                .u-pagination {
                    margin: 0 0 0 24px;
                }

                .u-table {
                    .u-table-body-outer {
                        margin-top: -0.5px;
                    }
                }
            }
        }

        .u-tree {
            padding: 16px;
            overflow-y: auto;
            /* .u-tree-checkbox-inner {
                background-color : #004898;
            } */

            .u-tree-checkbox-checked .u-tree-checkbox-inner {
                background-color: #004898;
                border-color: #004898;
            }

            li {
                margin: 0;
                padding: 5px 0 5px 0;
            }

            a:hover {
                background-color: #ECEFF1;
            }
        }



        .u-tree-searchable-filter {
          color: #f50;
          transition: all .3s ease;
        }

        .child-node {
            color: red
        }

    }




}

.mt25 {
    margin-top: 25px;
}

.ml5 {
    margin-left: 5px
}

